<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col :span="14">
        <el-card header="可选字段">
          <div class="box">
            <div v-for="(item, index) in columnsGroup" :key="index">
              <t-title>{{ columnsGroup[index][0].group }}</t-title>
              <el-checkbox-group
                @change="changeCheckbox(fileds, index)"
                v-if="fileds.length"
                class="t-m-t-20 t-m-b-20"
                v-model="fileds[index]"
              >
                <el-checkbox
                  v-for="(_item, _index) in item"
                  :key="_index + '' + index"
                  :label="_item.label"
                  :disabled="_item.label == '操作'"
                ></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card header="已选">
          <ul class="box t-custom-fields-ul">
            <li
              v-for="(item, index) in sortCols"
              :data-label="item"
              :key="index"
            >
              <i class="t-font-20 el-icon-rank"></i>
              {{ item }}
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
    <div class="t-flex t-p-l-20 t-p-r-20 t-row-between t-m-t-30">
      <el-link type="primary" :underline="false" @click="reset"
        >恢复默认配置</el-link
      >
      <div class="t-flex">
        <t-button @click="close">取消</t-button>
        <t-button type="primary" @click="submit">保存</t-button>
      </div>
    </div>
  </div>
</template>
<script>
import { ArraygroupBy, deepClone } from "@/utils/common";
import Sortable from "sortablejs";
export default {
  props: {
    columns: {
      type: Array,
    },
    sortCols: {
      type: Array,
    },
    groupKey: {
      type: String,
      default: "基础字段",
    },
    fileds: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      columnsGroup: [],
      sortable: null,
      sortColsCopy: null,
      filedsCopy: null,
    };
  },
  watch: {
    deep: true,
  },
  mounted() {
    this.initCols();
    //深拷贝 防止元数据被串改
    this.filedsCopy = deepClone(this.fileds);
    this.sortColsCopy = deepClone(this.sortCols);
  },
  methods: {
    initSortable() {
      const EL = document.querySelector(".t-custom-fields-ul");
      this.sortable = new Sortable(EL, {
        dataIdAttr: "data-label",
        animation: 150,
      });
    },
    initCols() {
      this.handleGroup();
      this.getSortCols();
    },
    handleGroup() {
      // this.columns = this.columns.filter((item) => {
      //   return item.label != "操作";
      // });
      this.columns.forEach((item) => {
        if (!("group" in item)) {
          item.group = this.groupKey;
        }
      });
      this.columnsGroup = ArraygroupBy(this.columns, (item) => {
        return item.group;
      });
      if (this.fileds.length === 0) {
        this.columnsGroup.forEach((item, index) => {
          this.fileds[index] = [];
          item.forEach((_item, _index) => {
            if (!"customField" in _item || !_item.customField) {
              this.fileds[index].push(_item.label);
            }
          });
        });
      }
    },
    changeCheckbox(e, index) {
      let sortCols = [];
      e.forEach((item) => {
        item.forEach((_item) => {
          sortCols.push(_item);
        });
      });
      this.sortCols = sortCols;
      this.getSortCols();
      this.$emit("change", this.fileds);
    },
    getSortCols() {
      this.fileds.forEach((item) => {
        item.forEach((_item) => {
          if (!this.sortCols.includes(_item)) {
            this.sortCols.push(_item);
          }
        });
      });
      this.initSortable();
    },
    reset() {
      this.fileds = deepClone(this.filedsCopy);
      this.sortCols = [];
      setTimeout(() => {
        this.sortCols = deepClone(this.sortColsCopy);
      }, 0);
    },
    submit() {
      let cols = [];
      this.sortable.toArray().forEach((label) => {
        this.columns.forEach((item) => {
          if (item.label == label) {
            delete item.customField;
            cols.push(item);
          }
        });
      });
      if (cols.length == 0) {
        this.$message.error("至少选择一个字段");
        return;
      }
      this.$message.success("设置成功");
      this.$emit("success", cols);
      this.close();
    },
    setFileds(d) {
      this.fileds = d;
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-card__header {
  padding: 10px;
  background: #eee;
  color: #999;
  font-size: 16px;
  font-weight: bold;
}
/deep/.el-checkbox {
  margin: 10px;
}
.box {
  height: 400px;
  overflow: auto;
}
ul {
  li {
    padding: 10px;
    border: 1px solid #eee;
    cursor: move;
    border-bottom: none;
    &:last-child {
      border-bottom: 1px solid #eee;
    }
    &:hover {
      background: #eee;
    }
  }
}
</style>